import React from "react";
import SmallBoxClasses from "./SmallBox.module.scss";
import { Link } from "react-router-dom";

// 小盒子的外层样式
const SmallBox = (props) => {
  return (
    <div
      className={`outer-border ${SmallBoxClasses.outerBox} ${props.className}`}
    >
      <div className={`ct st ${SmallBoxClasses.title}`}>
        <div>{props.title}</div>
        {props.showMore ? (
          <Link className={`${SmallBoxClasses.more} ct`} to={`${props.Link}`}>
            <svg
              t="1717482272378"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4524"
              width="15"
              height="15"
            >
              <path
                d="M390.948571 897.462857a53.028571 53.028571 0 0 1-38.765714-16.091428 54.491429 54.491429 0 0 1 0-77.531429l288.914286-288.914286-288.914286-288.914285a54.491429 54.491429 0 0 1 0-77.531429 55.222857 55.222857 0 0 1 77.531429 0l365.714285 365.714286-365.714285 365.714285a54.125714 54.125714 0 0 1-38.765715 17.554286z"
                fill="#62afff"
                p-id="4525"
              ></path>
            </svg>
          </Link>
        ) : (
          ""
        )}
      </div>
      <div className={SmallBoxClasses.list}>{props.children}</div>
    </div>
  );
};

export default SmallBox;
